<template>
	<view class="content content--nopadding">
		<view class="map">
			<map id="show-map" scale="14" :style="{ height: mapHeight }" :latitude="latitude" :longitude="longitude" :markers="markers"
			 show-location @markertap="tapMarker">
				<cover-image @click.stop="toLocate" class="locate" src="/static/locate.png"></cover-image>
			</map>
		</view>

		<view class="machine">
			<view class="machine__map-nav" @tap="openLocation">
				<view class="icon icon-compass-discover-fill"></view>
				<view class="text"><text>导航</text></view>
			</view>
			<view class="machine__msg">
				<view class="machine__msg__addr">
					<text>{{machineDetail.address}}</text>
				</view>
				<view class="machine__msg__item">
					<text class="icon icon-weizhi"></text>
					<text>{{machineDetail.distance}}</text>
				</view>
				<view class="machine__msg__item">
					<text class="icon icon-shizhong"></text>
					<text>周一至周日 5:00-22:30 | 编号：{{machineDetail.machineNo}}</text>
				</view>
			</view>
			<view class="machine__category">
				<view class="machine__category__item" v-for="(item,index) in classes" :key="index">
					<image :src="item.imageSrc"></image>
					<view class="machine__category__item__msg">
						<view><text>{{item.name}}</text><text class="fill">{{item.fill}}%</text></view>
						<view><text>{{item.remark}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				mapHeight: '600px',
				mapContext: null,
				latitude: null, //纬度
				longitude: null, //经度
				markers: [],
				currentMarkerId: 0,
				machineIndex: 0, //回收机序号
				classes: [{
					name: '饮料瓶',
					imageSrc: '../../static/lj-class1.png',
					fill: '54',
					remark: '0.03元/个'
				}, {
					name: '纸类',
					imageSrc: '../../static/lj-class2.png',
					fill: '22',
					remark: '0.35元/kg'
				}, {
					name: '纺织物',
					imageSrc: '../../static/lj-class3.png',
					fill: '23',
					remark: '0.20元/kg'
				}, {
					name: '金属',
					imageSrc: '../../static/lj-class4.png',
					fill: '53',
					remark: '0.60元/kg'
				}, {
					name: '塑料',
					imageSrc: '../../static/lj-class5.png',
					fill: '33',
					remark: '0.40元/kg'
				}, {
					name: '有害垃圾',
					imageSrc: '../../static/lj-class6.png',
					fill: '55',
					remark: '0元/kg'
				}]
			}
		},
		computed: {
			...mapState([
				'machineList',
			]),
			machineDetail() {
				return this.machineList[this.machineIndex];
			}
		},
		onLoad(option) { // created
			this.machineIndex = Number(option.index);
			this.mapContext = uni.createMapContext("show-map", this);
			uni.getSystemInfo({
				success: (res) => {
					// let selectorQuery = uni.createSelectorQuery().in(this);
					// selectorQuery.select(".machine")
					// .fields({
					// 	size: true
					// }, data => {
					// 	this.mapHeight = `${res.windowHeight - data.height}px`;
					// }).exec();
					
					let machineHeight = res.windowWidth * 470 / 750;
					console.log(machineHeight)
					this.mapHeight = `${res.windowHeight - machineHeight}px`;
				}
			});
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.longitude = res.longitude;
					this.latitude = res.latitude;
					this.setmarkers();
				}
			});
		},
		onReady() { // mounted
		},
		methods: {
			/**
			 * @description 设置地图marker
			*/
			setmarkers() {
				this.markers = this.machineList.map((item, index) => {
					let new_item = {
						id: index, //回收机列表序号
						latitude: item.latitude,
						longitude: item.longitude,
						iconPath: this.machineIndex === index ? '/static/marker-large.png' : '/static/marker.png',
					}
					return new_item;
				});
			},
			tapMarker(e) {
				this.markers[this.machineIndex].iconPath = '/static/marker.png'
				this.machineIndex = e.markerId;
				this.markers[this.machineIndex].iconPath = '/static/marker-large.png'
			},
			toLocate(e) {
				this.mapContext.moveToLocation();
			},
			openLocation() {
				uni.openLocation({
					latitude: this.machineDetail.latitude,
					longitude: this.machineDetail.longitude,
					name: this.machineDetail.address,
					address: this.machineDetail.address,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style>
	@import url("../../css/map/map.css");
</style>
